﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>上传红心歌曲</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/CookiesOP.js"></script>
    <script src="~/Scripts/webuploader/webuploader.js"></script>
    <link href="~/Scripts/webuploader/webuploader.css" rel="stylesheet" />
    <script type="text/javascript">
    var uploader;
    $(function () {
        var $ = jQuery,
            $list = $('#thelist'),
            state = 'pending';

        uploader = WebUploader.create({
            // 自动上传。
            auto: true,
            // 不压缩image
            resize: false,

            // swf文件路径
            swf: '/Scripts/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: '/Upload/UploadData',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
            threads: 1
        });
        uploader.on('fileQueued', function (file) {
            $list.append('<div id="' + file.id + '" class="single_item">\
                                <div class="left_item">\
                                    <span class="' + file.id + ' ">等待上传...</span>\
                                </div>\
                                <div class="right_item">\
                                    <input class="myinputname" type="text" value="' + file.name + '"><a onclick="cancel(\'' + file.id + '\')">　　删除</a>\
                                    <input value="" type="text" style="display:none" class="myinputurl" id="' + file.id + 'url" />\
                                </div>\
                             </div>');
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                  '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                  '</div>' +
                '</div>').appendTo($li).find('.progress-bar');
            }

            //$li.children('.left_item').find('span.state').html('上传中');
            $('span.' + file.id).html('上传中');
            $percent.css('width', percentage * 100 + '%');
        });

        uploader.on('uploadSuccess', function (file) {
            $('span.' + file.id).html('已上传');
            //$('#' + file.id).children('.left_item').find('span.state').html('已上传');
        });

        uploader.on('uploadError', function (file) {
            $('span.' + file.id).html('上传出错');
            //$('#' + file.id).children('.left_item').find('span.state').html('上传出错');
        });

        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });
        //后端返回数据
        uploader.on('uploadAccept', function (object, ret) {
            //alert(ret._raw);
            //$("#" + object.file.id + "url").attr("value", ret._raw);//val(ret._raw);
            var addItem = $("<p> <input type='text' hidden='hidden' name='url' value='" + ret._raw + "' />  <input placeholder='歌曲名'  type='text' name='songName' /> <input placeholder='歌手名'  type='text' name='singerName' /> <input type='button' onclick='$(this).parent().remove()' value='移除' class='btn btn-warning btn-sm' /> </p>");
            $("#itemArea").append(addItem);
        });
    });
    function cancel(obj) {
        $('#' + obj).remove();
        uploader.removeFile(obj);
    }    
    </script>

</head>
<body>
    <div style="margin-top:50px;">
        <div>
            <span>上传红心音乐</span>
        </div>
        <div>
            <div>
                <div id="picker">
                    选择歌曲
                </div>
            </div>
        </div> 
        <div>
            <form action="/Upload/UpLikeSong" method="post" id="songlist">
                <input type="hidden" id="userToken" name="userToken" />
                <div id="itemArea">

                </div>
                <input type="submit" value="确认添加" />
            </form>
        </div>
    </div>
    <!--<div id="thelist"></div>-->
    <script>
        $("#songlist").submit(function () {
            AddUser();
        })
        function AddUser()
        {
            $("#userToken").val(GetCookieByName("Id"));
        }
    </script>
</body>
</html>
